<template>
  <div class="address">
    <div class="top">
      <div class="t-body">
        <div class="t-top">填写地址</div>
        <div class="myaddress">
          <div class="m-left">
            <div class="l-top">
              <span class="name">chenjz</span>
              <span class="phone">15986889108</span>
            </div>
            <div class="l-bottom">
              <span>北京市北京市西城区xxx</span>
            </div>
          </div>
          <div class="m-right">
            <span class="bi bi-chevron-compact-right"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">共1件商品</div>
      <div class="c-detail">
        <div class="img">
          <img
            src="http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg"
            alt=""
          />
        </div>
        <div class="text">
          <div class="t-title">
            【AppleiPhone8】AppleiPhone8(A1863)256GB深空灰色移动联通电信4G手机
          </div>
          <div class="t-price">￥18666.00</div>
        </div>
        <div class="num">x 1</div>
      </div>
      <div class="c-detail">
        <div class="img">
          <img
            src="http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg"
            alt=""
          />
        </div>
        <div class="text">
          <div class="t-title">
            【AppleiPhone8】AppleiPhone8(A1863)256GB深空灰色移动联通电信4G手机
          </div>
          <div class="t-price">￥18666.00</div>
        </div>
        <div class="num">x 1</div>
      </div>
    </div>
    <div class="more">
      <div class="box save">
        <div class="b-text">会员优惠</div>
        <div class="b-num">-¥18866.60</div>
      </div>
      <div class="box express">
        <div class="b-text">快递费用</div>
        <div class="b-num">免运费</div>
      </div>
    </div>
    <div class="bottom">
      <div class="totalPrice">合计：<span>¥16799.4</span></div>
      <div class="button">立即结算</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import "../assets/less/variable.less";
.address {
  position: fixed;
  top: 0;
  width: 100%;
  background: #f5f5f5;
  font-size: 18px;
  min-height: 100%;
  .top {
    background-image: linear-gradient(#e93323, #f3e2e1);
    padding: 10px;
    .t-body{
        width: 100%;
        .t-top{
            width: 50%;
            background: white;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            text-align: center;
            margin-bottom: -1px;
            height: 40px;
            line-height: 40px;
            color: @color4;
        }
        .myaddress{
            background: white;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            border-bottom: 2px dashed @color4;
            .m-left{
                .l-top{
                    margin: 10px 0;
                    .name{
                        display: inline-block;
                        font-weight: bold;
                        margin-right: 20px;
                    }
                }
                .l-bottom{
                    color: gray;
                }
            }
            .m-right{
                display: flex;
                align-items: center;
                font-size: 22px;
            }
        }
    }
  }
  .content{
      .title{
          padding: 10px;
          background: white;
          margin-bottom: 2px;
      }
      .c-detail{
          display: flex;
          background: white;
          justify-content: space-between;
          padding: 10px;
          margin-bottom: 2px;
          .img{
              flex-basis: 20%;
              width: 20%;
              img{
                  width: 100%;
              }
          }
          .text{
              flex-basis: 65%;
              width: 65%;
              position: relative;
              .t-title{
                  font-size: 16px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
              }
              .t-price{
                  position: absolute;
                  bottom: 0;
                  color : @color4;
                  font-size: 16px;
              }
          }
          .num{
              width: 10%;
              flex-basis: 10%;
              text-align: right;
              color: grey;
          }
      }
  }
  .more{
      margin-top: 10px;
      .box{
          background: white;
          display: flex;
          justify-content: space-between;
          margin-bottom: 2px ;
          >div{
              padding: 10px;
          }
          .b-num{
              color : grey
          }
      }
  }
  .bottom{
      position: fixed;
      bottom: 0;
      background: white;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .totalPrice{
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          span{
              color : @color4
          }
      }
      .button{
          height: 40px;
          line-height: 40px;
          padding: 0px 20px;
          margin-right: 10px;
          border-radius: 20px;
          background: red;
          color : white;
          box-sizing : border-box;
      }
  }
}
</style>